<style scoped>
.el-checkbox{margin-top: 5px;}
</style>
<template>
    <div id="approval">
        <el-form :inline="true" :model="queryForm" ref="formInline" class="demo-form-inline"
                 style="border-bottom:1px solid #ccc;">
            <el-form-item label="法人名称" class="selectMB10">
                <el-select size="mini" v-model="queryForm.legalPersonName" clearable @change="selectLegalPersonName"
                           placeholder="请选择">
                    <el-option v-for="(legalPerson,index) in legalPersonLists" :key="index" :label="legalPerson.legalPersonName"
                               :value="legalPerson.legalPersonName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备件编码" class="selectMB10">
                <el-input size="mini" v-model="queryForm.spareCoding" placeholder="请输入备件编码"></el-input>
            </el-form-item>
            <el-form-item label="备件名称" class="selectMB10">
                <el-input size="mini" v-model="queryForm.spareName" placeholder="请输入备件名称"></el-input>
            </el-form-item>
            <el-form-item label="状态名称" prop="status" class="selectMB10">
                <el-select size="mini" v-model="queryForm.status" v-if="activeName == 'first'" clearable placeholder="请选择" style="width:100px;">
                    <el-option v-for="(status,index) in materialConfirmStatus" :key="index" :label="status.label" :value="status.value">
                    </el-option>
                </el-select>
                <el-select size="mini" v-model="queryForm.status" v-if="activeName == 'second'" clearable placeholder="请选择" style="width:100px;">
                    <el-option v-for="(status,index) in confirmStatus" :key="index" :label="status.label" :value="status.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="报价截止日期" class="selectMB10">
                <el-date-picker type="date" size="mini" :editable="false" v-model="queryForm.endTime"
                                placeholder="请选择报价截止日期" @change="selectedEndTime"></el-date-picker>
            </el-form-item>

            <el-checkbox v-model="queryForm.lowestPrice" v-if="activeName == 'first'"
                         @change="queryForm.minimumMOQ = false; queryForm.latelyTime = false">仅显示价格最低
            </el-checkbox>
            <el-checkbox v-model="queryForm.minimumMOQ" v-if="activeName == 'first'"
                         @change="queryForm.lowestPrice = false; queryForm.latelyTime = false">仅显示MOQ最小
            </el-checkbox>
            <el-checkbox v-model="queryForm.latelyTime" v-if="activeName == 'first'"
                         @change="queryForm.minimumMOQ = false; queryForm.lowestPrice = false">仅显示交货日期最近
            </el-checkbox>

            <el-form-item class="selectMB10">
                <el-button class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" size="mini" type="danger" @click="querySelect()">查询
                </el-button>
            </el-form-item>
        </el-form>
        <!--表格-->
        <label class="default-label">备件报价明细：</label>
        <el-button class="bolder outsideBtnBS" size="mini" type="danger">更新价格</el-button>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" >
            <el-tab-pane label="按备件确认" name="first">
                <el-table :data="tableData" border style="width: 100%;" v-loading.body="loading"
                          element-loading-text="拼命加载中">
                    <el-table-column  type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                    <el-table-column  label="操作" header-align="center" align="center" width="60" v-if="powerFlag">
                        <template scope="scope">
                            <div class="operationItem bolder" v-if="scope.row.confirmStatus==10" @click="mterialAccess(scope.$index, scope.row)">确认</div>
                            <div class="operationItem bolder disabled" v-else >确认</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="报价日期" header-align="center"  show-overflow-tooltip></el-table-column>
                    <el-table-column prop="spareCoding" label="备件编码" header-align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="spareName" label="备件名称" header-align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="measurementUnit" label="计量单位" header-align="center" width="80" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="quotedQuantity" label="报价数量" header-align="center"></el-table-column>
                    <el-table-column prop="currencyCodeWord" label="币别" header-align="center" width="60"  show-overflow-tooltip></el-table-column>
                    <el-table-column prop="quantityAvailable" label="可供数量" header-align="center"></el-table-column>
                    <el-table-column prop="costAmount" label="成本金额" header-align="center" align="right"></el-table-column>
                    <el-table-column prop="includingTaxPrice" label="含税单价金额" header-align="center" align="right"></el-table-column>
                    <el-table-column prop="quotationAmount" label="不含税单价金额" header-align="center" align="right"></el-table-column>
                    <el-table-column prop="taxRate" label="税率(%)" header-align="center"></el-table-column>
                    <el-table-column prop="moq" label="MOQ" header-align="center"></el-table-column>
                    <el-table-column prop="deliveryCycle" label="交货周期(天)" header-align="center"></el-table-column>
                    <el-table-column prop="endTime" label="报价截止日期" header-align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="quotationExplain" label="说明" header-align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="confirmStatusWord" label="状态" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="currentPage3" :current-page="pageIndex"
                       :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                       :page-count="totalPage" :total="totalNumber"></el-pagination>
            </el-tab-pane>
            <el-tab-pane label="按报价单确认" name="second">
                <el-table :data="queryForSingleTable" border style="width: 100%;"
                          v-loading.body="loading2"
                          element-loading-text="拼命加载中">
                    <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                    <el-table-column label="操作" header-align="center" align="center" width="60" v-if="powerFlag">
                        <template scope="scope">
                            <div class="operationItem bolder" v-if="scope.row.confirmStatus==10 || scope.row.confirmStatus==30" @click="mterialAccess(scope.$index, scope.row)">确认</div>
                            <div class="operationItem bolder disabled" v-else >确认</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="quotationNumber" label="报价单号" header-align="center" width="160"  show-overflow-tooltip>
                        <template scope="scope">
                            <el-button size="mini" @click="checkTheDetails(scope.$index, scope.row)" class="blueFont">
                                {{scope.row.quotationNumber}}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="biddingTypeShow" label="报价类型" header-align="center" width="60"  show-overflow-tooltip></el-table-column>
                    <!-- 
                    <el-table-column prop="supplierCode" label="供应商编号" header-align="center" width="80"></el-table-column>
                    -->
                    <el-table-column prop="totalQuantityQuoted" label="报价总数量" header-align="center"
                                     width="80"></el-table-column>
                    <el-table-column prop="currencyCodeWord" label="报价币别" header-align="center" width="60"  show-overflow-tooltip></el-table-column>
                    <el-table-column prop="totalQuotedPrice" label="报价不含税总金额" header-align="center"
                                     align="right"></el-table-column>
                    <el-table-column prop="tax" label="税额" header-align="center" align="right" width="60"></el-table-column>
                    <el-table-column prop="totalQuotedTaxPrice" label="报价含税总金额" header-align="center"
                                     align="right" width="100"></el-table-column>
                    <el-table-column prop="startTime" label="报价生效日期" header-align="center"  show-overflow-tooltip></el-table-column>
                    <el-table-column prop="endTime" label="报价截止日期" header-align="center"  show-overflow-tooltip></el-table-column>
                    <el-table-column prop="createTime" label="报价日期" header-align="center"  show-overflow-tooltip></el-table-column>
                    <el-table-column prop="confirmStatusCode" label="状态" header-align="center"
                                     align="center" width="80"  show-overflow-tooltip></el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                       :current-page.sync="currentPage3" :current-page="pageIndex2"
                       :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper"
                       :page-count="totalPage2" :total="totalNumber2"></el-pagination>
            </el-tab-pane>
        </el-tabs>
        <!-- 点击每行的备件编码查看明细 明细弹窗 -->
        <el-dialog id="replaceMask" title="明细" :visible.sync="checkTheDetailsVisible" size="large" :lock-scroll="false">
            <el-table :data="detailsData" border style="width: 100%">
                <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                <el-table-column property="spareCoding" label="备件编号" header-align="center"  show-overflow-tooltip></el-table-column>
                <el-table-column property="spareName" label="备件名称" header-align="center"  show-overflow-tooltip></el-table-column>
                <el-table-column property="quotationUnit" label="计量单位" header-align="center"  show-overflow-tooltip></el-table-column>
                <el-table-column property="quotedQuantity" label="计划数量" header-align="center"></el-table-column>
                <el-table-column property="currencyCodeWord" label="币别" header-align="center" width="60"  show-overflow-tooltip></el-table-column>
                <el-table-column property="quantityAvailable" label="可供数量" header-align="center"></el-table-column>
                <el-table-column property="costAmount" label="成本金额" header-align="center" align="right"></el-table-column>
                <el-table-column property="quotationAmount" label="报价金额" header-align="center"
                                 align="right"></el-table-column>
                <el-table-column property="moq" label="MOQ" header-align="center"></el-table-column>
                <el-table-column property="deliveryCycle" label="交货周期(天)" header-align="center"></el-table-column>
                <el-table-column property="endTime" label="报价截止日期" header-align="center"  show-overflow-tooltip></el-table-column>
            </el-table>
        </el-dialog>
        <!-- 点击每行的审批 审批弹窗 -->
        <el-dialog id="approvalMask" title="确认提示信息" :visible.sync="handleApprovalVisible" size="small" :lock-scroll="false">
            <el-form :model="approvalForm">
                <h2>是否确认当前报价信息？</h2>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="access(true)">确认</el-button>
                <el-button @click="handleApprovalVisible=false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default  {
        data() {
            return {
                queryForm: {
                    quotationNumber: '',
                    legalPersonName: '',
                    legalPersonId: '',
                    status: '',
                    spareCoding: '',
                    spareName: '',
                    endTime: '',
                    lowestPrice: '',
                    minimumMOQ: '',
                    latelyTime: ''
                },
                confirmStatus: [],
                materialConfirmStatus: [],
                activeName: 'first',
                loading: false,
                loading2: false,
                // 按计划汇总
                formInline: {
                    legalPersonMessage: "",
                    spareCode: "",
                    spareName: "",
                    status: "",
                    quotationDeadline: ""
                },
                tableData: [],
                queryForSingleTable: [],
                tableData2: [],
                legalPersonLists: [],
                pageIndex: 1,    //当前页（必传）
                pageSize: 10,   //每页多少条
                currentPage3:3,
                totalNumber: 20,
                totalPage: 2,

                pageIndex2: 1,    //当前页（必传）
                pageSize2: 10,   //每页多少条
                totalNumber2: 20,
                totalPage2: 2,
                checkTheDetailsVisible: false,    // 点击每行的备件编码查看明细
                detailsData: [],
                handleApprovalVisible: false,     // 点击每行的审批
                formLabelWidth: "90",
                approvalForm: {
                    textarea: ""
                },
                nowVendorCode: '',
                nowQuotationNumber: '',
                nowSpareCoding: '',
                //权限
                powerFlag:false,
                nowSpareCoding: '',
                nowId:'',
                //查询禁用
                selectDisabled:false
            };
        },
        computed:{
            powerData(){
                return this.$store.state.powerData;
            }
        },
        watch:{
            powerData(){
                var _this=this;
                for(var i=0;i<_this.powerData.length;i++){
                    if(_this.powerData[i]=="ROLE_security_quotationConfirmation_operation"){
                        //报价确认权限
                        _this.powerFlag=true;
                    }
                }
            }
        },
        mounted: function () {
            var _this = this;
            _this.$store.commit('currentActive', 'QuotationApproval');
            // //ajax前后查询按钮禁用
            // $(".selectAll").ajaxStart(function(){
            //     _this.selectDisabled=true;
            // });
            // $(".selectAll").ajaxStop(function(){
            //     _this.selectDisabled=false;
            // });
            //判断权限
            for(var i=0;i<_this.powerData.length;i++){
                if(_this.powerData[i]=="ROLE_security_quotationConfirmation_operation"){
                    //报价确认权限
                    _this.powerFlag=true;
                }
            }
           // _this.query();
            _this.showLegalPerson();
          //  _this.planSCDropDownValue();
        },
        methods: {
            //报价截止日期
            selectedEndTime(val){
                var _this=this;
                _this.queryForm.endTime = val;
            },
            // 按备件确认  按报价单确认 tab
            handleClick(tab, event) {
                // console.log(tab, event);
                var _this=this;
                if(tab.index == 0){
                    _this.query();
                }else if(tab.index == 1){
                    _this.queryForSingle();
                }
            },

            querySelect() {
                var _this = this;
                if (_this.activeName == 'first') {
                    _this.query();
                } else {
                    _this.queryForSingle()
                }
            },
            //显示法人名称下拉框
            showLegalPerson() {
                var _this = this;
                $.ajax({
                    type: 'GET',
                    url: _this.procurement_service + "legalPerson/ofCurrentUser",
                    cache: false,
                    success: function (data) {
                        if (data.success) {
                            _this.legalPersonLists = data.data;
                        } else {
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            // 下拉列表选择法人名称
            selectLegalPersonName(){
                var _this = this;
                for (var i = 0; i < _this.legalPersonLists.length; i++) {
                    if (_this.queryForm.legalPersonName == _this.legalPersonLists[i].legalPersonName) {
                        _this.queryForm.legalPersonId = _this.legalPersonLists[i].id;
                    }
                }
            },

            //下拉列表选择报价单确认状态
            planSCDropDownValue(){
                var _this = this;
                var tmp = ["confirmStatus","materialConfirmStatus"];
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service + 'procurement/getPullDownList',
                    cache: false,
                    data: JSON.stringify(tmp),
                    dataType: 'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.confirmStatus = data.data.confirmStatus;
                            _this.materialConfirmStatus = data.data.materialConfirmStatus;
                        } else {
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            // 按备件确认
            query(){
                var _this = this;
                _this.loading = true;
                if (_this.queryForm.legalPersonName == null || _this.queryForm.legalPersonName == "") {
                    _this.queryForm.legalPersonId = "";
                }

                var tmp = {
                    legalPersonId: _this.queryForm.legalPersonId,
                    spareCoding: _this.queryForm.spareCoding,
                    spareName: _this.queryForm.spareName,
                    confirmStatus: _this.queryForm.status,
                    endTime: _this.queryForm.endTime,
                    lowestPrice: _this.queryForm.lowestPrice,
                    minimumMOQ: _this.queryForm.minimumMOQ,
                    latelyTime: _this.queryForm.latelyTime,
                    pageIndex: _this.pageIndex,
                    pageSize: _this.pageSize
                };
                _this.selectDisabled=true;
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service + "quotationSpareParts/search",
                    cache: false,
                    data: JSON.stringify(tmp),
                    dataType: 'JSON',
                    contentType: "application/json;charset=utf-8",     //*****
                    success: function (data) {
                        if (data.success) {
                            var arr=data.data.dataList;
                            //金额保留两位
                            for(var i=0;i<arr.length;i++){
                                if(arr[i].costAmount){
                                    arr[i].costAmount=arr[i].costAmount.toFixed(8);
                                }
                                if(arr[i].includingTaxPrice){   // 含税单价金额
                                    arr[i].includingTaxPrice=arr[i].includingTaxPrice.toFixed(8);
                                }
                                if(arr[i].quotationAmount){
                                    arr[i].quotationAmount=arr[i].quotationAmount.toFixed(8);
                                }
                            }
                            _this.tableData = arr;
                            _this.loading = false;
                            _this.totalNumber=data.data.totalNumber;    //总条数
                            _this.totalPage=data.data.totalPage;    //总页数 
                        } else{
                            _this.common.errorTip(data.errorMessage);
                        }
                        _this.selectDisabled=false;    
                    }
                });
            },
            //按报价单确认
            queryForSingle(){
                var _this = this;
                _this.loading2 = true;

                if (_this.queryForm.legalPersonName == null || _this.queryForm.legalPersonName == "") {
                    _this.queryForm.legalPersonId = "";
                }

                var tmp = {
                    legalPersonId: _this.queryForm.legalPersonId,
                    spareCoding: _this.queryForm.spareCoding,
                    spareName: _this.queryForm.spareName,
                    confirmStatus: _this.queryForm.status,
                    endTime: _this.queryForm.endTime,
                    lowestPrice: _this.queryForm.lowestPrice,
                    minimumMOQ: _this.queryForm.minimumMOQ,
                    latelyTime: _this.queryForm.latelyTime,
                    pageIndex: _this.pageIndex2,
                    pageSize: _this.pageSize2,
                };
                _this.selectDisabled=true;
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service + "quotationForSingle/search",
                    cache: false,
                    data: JSON.stringify(tmp),
                    dataType: 'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                             var arr=data.data.dataList;
                            //金额保留两位
                            for(var i=0;i<arr.length;i++){
                                if(arr[i].totalQuotedPrice){
                                    arr[i].totalQuotedPrice=arr[i].totalQuotedPrice.toFixed(2);   //报价不含税总金额
                                }
                                if(arr[i].totalQuotedTaxPrice){
                                    arr[i].totalQuotedTaxPrice=arr[i].totalQuotedTaxPrice.toFixed(2);   //报价含税总金额
                                }
                            }
                            _this.queryForSingleTable=arr;
                            // _this.queryForSingleTable = data.data.dataList;
                            _this.loading2 = false;
                            _this.totalNumber2=data.data.totalNumber;    //总条数
                            _this.totalPage2=data.data.totalPage;    //总页数 
                        } else{
                            _this.common.errorTip(data.errorMessage);
                        }
                        _this.selectDisabled=false;    
                    }
                });
            },
            // 点击每行的备件编码查看明细
            checkTheDetails(index, row){
                var _this = this;
                _this.checkTheDetailsVisible = true;
                var tmp = {
                    quotationNumber: row.quotationNumber,
                    pageIndex:1,
                    pageSize:10000,
                };
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service + "quotationSpareParts/search",
                    cache: false,
                    data: JSON.stringify(tmp),
                    dataType: 'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.detailsData = data.data.dataList;
                            _this.loading = false;
                        } else
                            _this.common.errorTip(data.errorMessage);
                    }
                });
            },

            // 备件报价确认按钮
            mterialAccess(index, row){
                var _this = this;
                _this.handleApprovalVisible = true;
                _this.nowVendorCode = row.vendorCode;
                _this.nowQuotationNumber = row.quotationNumber;
                _this.legalPersonId = row.legalPersonId;
                _this.nowSpareCoding = row.spareCoding;
                _this.nowId = row.id;
                _this.currencyCode=row.currencyCode;
                // console.log(row.confirmStatus)
            },

            // 报价单确认按钮
            quotationAccess(index, row){
                var _this = this;
                _this.handleApprovalVisible = true;
                _this.nowQuotationNumber = row.quotationNumber;
                _this.legalPersonId = row.legalPersonId;
                _this.currencyCode=row.currencyCode;
            },

            //审核通过不通过
            access(access){
                var _this = this;
                if (!access) {
                    _this.handleApprovalVisible = false;
                }
                if (_this.activeName == 'first') {
                    var tmp = {quotationNumber: _this.nowQuotationNumber,legalPersonId:_this.legalPersonId, vendorCode: _this.nowVendorCode, spareCoding: _this.nowSpareCoding, id: _this.nowId,currencyCode:_this.currencyCode};
                    $.ajax({
                        type: 'POST',
                        url: _this.procurement_service + "/quotationSparePartsConfirm/update",
                        cache: false,
                        data: JSON.stringify(tmp),
                        dataType: 'JSON',
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            if (data.success) {
                                // _this.detailsData = data.data;
                                _this.loading = false;
                                _this.common.successTip("操作成功！");
                                _this.handleApprovalVisible = false;
                                _this.query();
                            } else {
                                _this.common.errorTip(data.errorMessage);
                                _this.handleApprovalVisible = false;
                            }
                        }
                    });
                } else {
                    var tmp = {quotationNumber: _this.nowQuotationNumber,legalPersonId:_this.legalPersonId,currencyCode:_this.currencyCode};
                    $.ajax({
                        type: 'POST',
                        url: _this.procurement_service + "/quotationForSingleConfirm/update",
                        cache: false,
                        data: JSON.stringify(tmp),
                        dataType: 'JSON',
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            if (data.success) {
                                // _this.detailsData = data.data;
                                _this.loading = false;
                                _this.common.successTip("操作成功！");
                                _this.handleApprovalVisible = false;
                                _this.queryForSingle();
                            } else {
                                _this.common.errorTip(data.errorMessage);
                                _this.handleApprovalVisible = false;
                            }
                        }
                    });
                }
            },
            //  按备件确认 分页
            handleSizeChange(val) {
                var _this = this;
                _this.pageSize=val;
                _this.query();
            },
            //按备件确认 点击页码分页查询点击事件
            handleCurrentChange(val) {
                var _this = this;
                _this.pageIndex=val;
                _this.query();
            },
            //  按报价单确认 分页
            handleSizeChange2(val) {
                var _this = this;
                _this.pageSize2=val;
                _this.queryForSingle();
            },
            //按报价单确认 点击页码分页查询点击事件
            handleCurrentChange2(val) {
                var _this = this;
                _this.pageIndex2=val;
                _this.queryForSingle();
            },
            // //==========================================
            // successTip(p) {     //成功时的提示信息
            //     this.$notify({
            //         title: '成功',
            //         message: p,
            //         type: 'success'
            //     });
            // },

            // errorTip(p) {     //错误提示
            //     this.$notify.error({
            //         title: '错误',
            //         message: p
            //     });
            // }

        }
    };
</script>